import React, { useEffect } from 'react';
import './Log.css'
import { Table, Form, Select, DatePicker, Input, Button, Alert, Modal, } from '@arco-design/web-react';
import { useState } from 'react';
// import { LogShow } from '../../utils/api';
import systemApi from '../../API/systemApi';
import http from '../../utils/http'
import useForm from '@arco-design/web-react/es/Form/useForm';
const FormItem = Form.Item
const { RangePicker } = DatePicker;
// //时间选择器
// function onSelect(dateString, date) {
//     console.log('onSelect', dateString, date);
// }

// function onChange(dateString, date) {
//     console.log('onChange: ', dateString, date);
// }

// function onOk(dateString, date) {
//     console.log('onOk: ', dateString, date);
// }


const Log = () => {
    //表头
    const columns = [
        {
            title: '序号',
            // dataIndex: 'systemLogId',
            render: (col, record, index) => `${index + 1}`,
            key: 'systemLogId'
        },
        {
            title: '所属位置',
            dataIndex: 'parkingName',
            key: 'parkingName'
        },
        {
            title: '日志类型',
            dataIndex: 'systemLogType',
            key: 'systemLogType'
        },
        {
            title: '操作内容',
            dataIndex: 'systemLogInfo',
            key: 'systemLogInfo'
        },
        {
            title: '操作时间',
            dataIndex: 'logTime',
            key: 'logTime',
            render: (col, record) => <span>{record.logTime.substring(0, 10)} {record.logTime.substring(11, 19)}</span>
            //  {
            //     console.log(record.logTime.substring(0, 10));
            //     console.log(record.logTime.substring(11, 19));
            // }
        },
        {
            title: '操作IP',
            dataIndex: 'logIp',
            key: 'logIp'
        }, {
            title: '详细日志',
            dataIndex: 'op',
            render: (col, record) => (
                <Button type='text' onClick={() => { see(record) }}>查看</Button>
            )
        }
    ];
    //表格内容
    const [data, setData] = useState();

    //表格请求
    useEffect(() => {
        showLine()
    }, [])
    const showLine = () => {
        systemApi.getLog().then((res) => {
            if (res.code === 200) {
                const Alldata = res.result
                setData(Alldata)
            }
        })
        // http({
        //     url:'/system/logInfo/getAllLogInfo',
        //     method:'get'
        // }).then((res)=>{
        //     if(res.code===200){
        //         const Alldata=res.result
        //         setData(Alldata)
        //     }
        // })


    }

    //查看

    const [formShow] = Form.useForm()
    const see = (record) => {
        setVisible(true);
        console.log(record);
        formShow.setFieldsValue(record)
        let timedata = record.logTime.substring(0, 10) + ' ' + (record.logTime.substring(11, 19))
        formShow.setFieldValue('logTime', timedata)

    }
    //查询
    const [form] = useForm()
    const pory = () => {
        let value = form.getFieldsValue()

        let obj = {
            parkingName: value.parkingName ? value.parkingName : '',
            systemLogType: value.systemLogType ? value.systemLogType : '',
            userName: value.userName ? value.userName : '',
            startLogTime: value.e ? value.e[0] : '',
            endLogTime: value.e ? value.e[1] : '',
        }
        systemApi.LogQuerry(obj).then((res) => {
            if (res.code === 200) {
                const dataList = res.result
                setData(dataList)
            }
        })
        // http({
        //     url: '/logInfo/getLogInfo',
        //     method: 'post',
        //     data: obj,
        // }).then((res) => {
        //     console.log(res);
        //     if (res.code === 200) {
        //         const dataList = res.result
        //         setData(dataList)
        //     }
        // })
    }
    //重置
    const reset = () => {
        form.resetFields()
        showLine()
    }







    //弹窗
    const [visible, setVisible] = useState(false)
    //from的布局
    const formItemLayout = {
        labelCol: {
            span: 2,
        },
        wrapperCol: {
            span: 26,
        },
    };
    //所属位置下拉框
    const [parkDown, setParkdown] = useState([])
    const parkingDown = () => {
        systemApi.Logpark().then((res) => {

            let parkArr = []
            for (let i = 0; i < res.result.length; i++) {
                parkArr.push({
                    label: res.result[i].parkingName,
                    value: res.result[i].parkingName
                })
            }
            setParkdown(parkArr)
        })
        // http({
        //     url: '/logInfo/getLogLocation',
        //     method: 'get'
        // }).then((res) => {

        //     let parkArr = []
        //     for (let i = 0; i < res.result.length; i++) {
        //         parkArr.push({
        //             label: res.result[i].parkingName,
        //             value: res.result[i].parkingName
        //         })
        //     }
        //     setParkdown(parkArr)
        // })
    }
    //日志类型下拉框
    let [downValue, setdownValue] = useState([])
    function downBox() {
        systemApi.Logdown().then((res)=>{
            let arrdown=[]
            for(let i=0;i<res.result.length;i++){
                arrdown.push({
                    label:res.result[i].systemLogType,
                    value:res.result[i].systemLogType
                })
            }
            setdownValue(arrdown)
        })
        // http({
        //     url: '/logInfo/getLogType',
        //     method: 'get'
        // }).then((res) => {

        //     let arr = []
        //     for (let index = 0; index < res.result.length; index++) {
        //         arr.push({
        //             label: res.result[index].systemLogType,
        //             value: res.result[index].systemLogType,
        //         })
        //     }

        //     setdownValue(arr)
        // })
    
    }

    return <div style={{ background: 'white', height: '100%', padding: '0px 20px' }}>
        <p style={{ fontSize: '18px', fontWeight: 'bold', textAlign: 'left', paddingTop: '20px' }}>系统日志</p>
        {/* 查询 */}
        <Form form={form} className='formBoxFrom' layout='inline' colon size='default'>
            <FormItem label='所属位置' field='parkingName' >

                <Select
                    style={{ width: '260px' }}
                    placeholder='请选择'
                    onFocus={parkingDown}
                    options={parkDown}
                    allowClear
                />
            </FormItem>
            <FormItem label='起止时间' field='e'>
                <RangePicker
                    style={{ width: 260 }}
                    format='YYYY-MM-DD'
                // onChange={onChange}
                // onSelect={onSelect}
                // onOk={onOk}
                />
            </FormItem>
            <FormItem label='操作人员' field='userName' >

                <Input style={{ width: 260 }} allowClear placeholder='请输入' />
            </FormItem>

            <FormItem label='日志类型' field='systemLogType' >
                <Select
                    placeholder='请选择'
                    style={{ width: '260px' }}
                    onFocus={downBox}
                    options={downValue}
                    allowClear
                />
            </FormItem>
            <div style={{ textAlign: 'right', marginRight: '34px', }}>
                <FormItem>
                    <Button type='primary' className='btn-first' onClick={pory}>查询</Button>
                    <Button type='dashed' onClick={reset}>重置</Button>
                </FormItem>
            </div>



        </Form>

        <div style={{ textAlign: 'right', marginRight: '30px', marginBottom: '30px' }}>
            <Button type='outline' style={{}}>导出Excel</Button>
        </div>
        <Alert content='查找到 5 项   本次查询耗时：364 毫秒   清空' style={{ margin: '10px', width: '99%' }} />
        {/* //表格 */}
        <Table rowKey={(record) => record.systemLogId} columns={columns}
            data={data} pagination={{
                pageSize: 2, sizeCanChange: true,
                showTotal: (total, range) => `共 ${total} 条 第 ${range[1] / 2} / ${Math.ceil(total / 2)} 页`,
            }} />
        {/* 查看 */}
        <Modal
            title='查看详情'
            visible={visible}
            // onOk={() => setVisible(false)}
            // okText='关闭'
            onCancel={() => setVisible(false)}
            footer={<Button onClick={() => setVisible(false)}>
                关闭
            </Button>}
        >
            <Form
                disabled
                {...formItemLayout}
                form={formShow}
                labelCol={{
                    style: { flexBasis: 120 },
                }}
                wrapperCol={{
                    style: { flexBasis: 'calc(100% - 120px)' },
                }}
            >
                <FormItem label='序号' field='systemLogId' >
                    <Input placeholder='' />
                </FormItem>
                <FormItem label='所属位置' field='parkingName' >
                    <Input placeholder='' />
                </FormItem>
                <FormItem label='日志类型' field='systemLogType' >
                    <Select options={['男', '女']} />
                </FormItem>
                <FormItem label='操作内容' field='systemLogInfo' >
                    <Input placeholder='' />
                </FormItem>
                <FormItem label='操作时间' field='logTime' >
                    <Input placeholder='' />
                </FormItem>
                <FormItem label='操作IP' field='logIp'>
                    <Input placeholder='' />
                </FormItem>

            </Form>
        </Modal>

    </div>
}
export default Log